<template>
  <CardModules title="实时监控">
    <div class="real-video" id="real_video">
      <!-- <img src="/images/video1.png" alt="" />
      <div class="video-title">郑应上游取证1</div> -->
      <jessibucaPlayer
        ref="jessibuca"
        :videoUrl="videoUrl"
        :error="videoError"
        :message="videoError"
        :hasAudio="hasAudio"
        domId="buttonsBox"
        fluent
        autoplay
        live
        :attrList="attrList"
        :shipInfo="shipInfo[currentCameraId]"
      />

      <!-- <VideoPlayer :currentCameraId="currentCameraId" :videoUrl="videoUrl" id="video-player" /> -->

      <div id="ptz_model"></div>

      <PTZPlayer class="ptz-player" ref="ptzRef" @ptzChange="ptzChange" />

      <PTZMenu ref="menuRef" @menuEvent="menuEvent" :playbackUrl="playbackUrl" />
    </div>
  </CardModules>
</template>
<script setup>
  import { ref, onMounted } from 'vue';
  import CardModules from '/@/components/cardModules/index.vue';
  import jessibucaPlayer from '/@/components/jessibuca/index.vue';
  // import VideoPlayer from '/@/components/video/live.vue';
  import PTZPlayer from './components/ptz.vue';
  import PTZMenu from './components/menu.vue';
  import { api as ptzApi } from '/@/api/wvp/ptz.js';

  const videoUrl = ref('');
  const playbackUrl = ref('');
  const hasAudio = ref(false);
  const ptzRef = ref();
  const menuRef = ref();
  const attrList = [
    {
      name: 'MMSI',
      prop: 'mmsi',
    },
    {
      name: '船名',
      prop: 'vesselName',
    },
    {
      name: '航速',
      prop: 'speed',
      util: '节',
    },
  ];
  const shipInfo = ref({});
  const currentCameraId = ref('');

  const videoError = function (e) {
    console.log('播放器错误：' + JSON.stringify(e));
  };

  function changeUrl(row) {
    currentCameraId.value = row.cameraId;
    videoUrl.value = row.flvStreamUrl;
    playbackUrl.value = row.playbackStreamUrl;
  }

  function changeShipInfo(row) {
    shipInfo.value[row.cameraId] = row;
    // 定时任务，16秒后判断
    setTimeout(() => {
      removeInfo(row.cameraId);
    }, 16 * 1000);
  }

  function removeInfo(id) {
    if (+new Date() - +new Date(shipInfo.value[id].currentTime) >= 15000) {
      shipInfo.value[id] = null;
    }
  }

  function showPTZ() {
    ptzRef.value.ptzShow();
  }

  function addPtzModel() {
    const ptzModel = document.getElementById('ptz_model');
    const parent = document.getElementById('real_video');
    // 添加右击事件
    if (ptzModel) {
      ptzModel.addEventListener('contextmenu', function (event) {
        event.preventDefault(); // 阻止默认的右键菜单弹出
        // 获取父级元素的边界矩形
        const parentRect = parent.getBoundingClientRect();
        // 鼠标点击位置相对于视口的坐标
        const mouseX = event.clientX;
        const mouseY = event.clientY;
        // 计算相对父级的坐标
        const relativeX = mouseX - parentRect.left;
        const relativeY = mouseY - parentRect.top;
        menuRef.value.open({ relativeX, relativeY });
      });
    }
  }

  function menuEvent(type) {
    if (type === 'control') {
      showPTZ();
    }
  }

  function ptzChange(row) {
    ptzApi.ptzCommand({
      url: playbackUrl.value,
      command: row.command,
    });
  }

  onMounted(addPtzModel);
  defineExpose({ changeUrl, changeShipInfo });
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
